<template>
  <view class="songList_square">
    <view class="header">
      <scroll-view scroll-x enable-flex class="scroll_x">
        <view class="songList_tag"><uni-segmented-control :current="current" :values="hotTag" style-type="text" active-color="#fb6485" @clickItem="onClickItem" /></view>
      </scroll-view>
      <text class="iconfont icon-menu-line" @click="navTosongListTag"></text>
    </view>
    <view class="footer_container">
      <view class="footer" v-for="(item, i) in hotTag" :key="i">
        <view v-show="current === i">
          <template v-if="current === 0">
            <view class="refresh_container">
              <text :class="['iconfont', 'icon-shuaxin', flag ? 'mmm' : '']" @click="refreshSongList"></text>
              <text @click="refreshSongList">宝藏歌单</text>
            </view>
            <view class="zzz">
              <view class="List_container" v-for="item in RecommendLists" :key="item.id" @click="navSongsListDetail(item.id)">
                <image :src="item.picUrl" mode="widthFix"></image>
                <text class="hhh iconfont icon-dkw_bofang">
                  {{ item.playCount > 100000000 ? (item.playCount / 100000000).toFixed(2) + '亿' : (item.playCount / 10000).toFixed(1) + '万' }}
                </text>
              </view>
            </view>
            <view style="padding: 20rpx 0 20rpx 30rpx; font-weight: 550;">你是否也喜欢</view>
            <view class="zzz">
              <view class="List_container" v-for="item in likeList" :key="item.id" @click="navSongsListDetail(item.id)">
                <image :src="item.picUrl" mode="widthFix"></image>
                <text class="hhh iconfont icon-dkw_bofang">
                  {{ item.playCount > 100000000 ? (item.playcount / 100000000).toFixed(2) + '亿' : (item.playcount / 10000).toFixed(1) + '万' }}
                </text>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="Type"><song-type-list></song-type-list></view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  onLoad() {
    this.getHotTag()
    this.getRecommendSongList(80)
    setTimeout(() => {
      this.RecommendLists = this.getRandomArrayValue(this.RecommendList, 6)
      this.getGuessList(this.cookie)
    }, 1000)
  },
  computed: {
    ...mapState('login', ['cookie'])
  },
  data() {
    return {
      flag: false,
      hotTag: [],
      current: 0,
      RecommendList: [],
      RecommendLists: [],
      limit: 6,
      TypeList: [],
      likeList: []
    }
  },
  methods: {
    async getHotTag() {
      const { data: res } = await uni.$http.get('playlist/hot')
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('热门标签获取失败')
      res.tags.forEach(item => {
        this.hotTag.push(item.name)
      })
      this.hotTag.unshift('推荐')
      // this.hotTag=res.tags
    },
    async getRecommendSongList(limit) {
      const { data: res } = await uni.$http.get('personalized', { limit })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('推荐列表获取失败')
      this.RecommendList = res.result
    },
    async getGuessList(cookie) {
      const { data: res } = await uni.$http.get('recommend/resource', { cookie })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('猜你喜欢列表获取失败')
      this.likeList = res.recommend
    },
    onClickItem(e) {
      this.current = e.currentIndex
      setTimeout(() => {
        if (this.hotTag[this.current] !== '推荐') {
          uni.$emit('name', this.hotTag[this.current])
          // this.getTypeSongList(this.hotTag[this.current], 12)
        }
      }, 500)
    },
    navSongsListDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_list_detail/songs_list_detail?id=' + id
      })
    },
    // 刷新推荐
    refreshSongList() {
      uni.showLoading({
        title: '数据加载中...'
      })
      setTimeout(() => {
        this.flag = true
        this.RecommendLists = this.getRandomArrayValue(this.RecommendList, 6)
        uni.hideLoading()
      }, 500)
      this.flag = false
    },
    navTosongListTag() {
      uni.navigateTo({
        url: '/subpkg/songList_Tag/songList_Tag'
      })
    },
    getRandomArrayValue(arr, num) {
      var sData = arr.slice(0),
        i = arr.length,
        min = i - num,
        item,
        index
      while (i-- > min) {
        index = Math.floor((i + 1) * Math.random())
        item = sData[index]
        sData[index] = sData[i]
        sData[i] = item
      }
      return sData.slice(min)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  display: flex;
  align-items: center;
  height: 80rpx;
}
.icon-menu-line {
  position: absolute;
  right: 0;
  line-height: 86rpx;
  text-align: center;
  width: 100rpx;
  background-color: #f5f5f5;
}
.scroll_x {
  white-space: nowrap;
  height: 80rpx;
}
.footer_container {
  height: calc(100vh - 80rpx);
}
.songList_tag {
  display: flex;
  white-space: nowrap;
}
/deep/.segmented-control {
  background-color: #eeeeef;
}
/deep/.segmented-control__item {
  margin-left: 40rpx;
}
.refresh_container {
  display: flex;
  align-items: center;
  height: 30rpx;
  margin: 20rpx 0 10rpx 0;
  font-weight: 550;
}
.icon-shuaxin {
  margin: 20rpx;
  transform-origin: (50% 50%);
}
.mmm {
  transform: rotate(360deg);
  transition: transform 1s;
}
.zzz {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-left: 13rpx;
}
.List_container {
  display: flex;
  margin: 20rpx;
}
.List_container image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.hhh {
  position: absolute;
  background: rgba(36, 36, 36, 0.3);
  // right: 2%;
  // top: 2%;
  color: white;
  border-radius: 20rpx;
  font-size: 25rpx;
  padding: 8rpx;
}
</style>
